import React, { useContext } from "react";
import Select from "../../Select";
import classNames from "classnames";
import { createUseStyles } from "react-jss";
import { ThemeContext } from "../../theme";
import type { NestFilterJoint } from "../type";

const useStyles = createUseStyles({
  selectAndOr: {
    width: "54px",
  },
  fontSize: {
    fontSize: (props: { fontSize: number }) => props.fontSize,
  },
});

export default function Joint({
  value,
  disabled,
  onChange,
}: {
  value: NestFilterJoint;
  disabled?: boolean;
  onChange: (joint: NestFilterJoint) => void;
}) {
  const { fontSize } = useContext(ThemeContext);
  const classes = useStyles({ fontSize });

  return (
    <Select
      className={classNames(classes.selectAndOr, classes.fontSize)}
      value={value}
      onChange={onChange}
      options={[
        { label: "AND", value: "AND" },
        { label: "OR", value: "OR" },
      ]}
      disabled={disabled}
    />
  );
}
